<!doctype html>
<html class="no-js" lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>02-dati-auto</title>
    <meta name="description" content="02-dati-auto" />
    <link rel="stylesheet" href="css/app.css" />
    <script src="bower_components/modernizr/modernizr.js"></script>
  </head>
  <body>

    <nav>
      <ul>
        <li class="dashboard"><a href="#" title="pannello di controllo">pannello di controllo</a></li>
        <li class="help"><a href="#" title="hai bisogno di aiuto? contattaci">hai bisogno di aiuto? contattaci</a></li>
        <li class="guide"><a href="#" title="Consulta la guida">Consulta la guida</a></li>
      </ul>
    </nav>

    <div class="wrapper">
      <header class="row">
        <div class="large-12 columns title">
          <h1 class="logo">Arval <span class="light">ritira il tuo usato</span></h1>
        </div>
      </header>


      <dl class="accordion welcome" data-accordion> 
        
        <dd class="accordion-navigation welcome active">
          
          <div class="row arrow-down"></div>

          <div class="row">
            <a href="#dati-veicolo" class="welcome-title trigger" title="Dati veicolo">1 Dati veicolo</a> 
          </div>
          
          <div class="content active" id="dati-veicolo">
            
                <div class="row">
                  <div class="large-12 columns">
                    <p class="welcome-text gray-border">
                      Per ottenere <strong>una migliore valutazione</strong> del tuo veicolo, cerca di essere <strong>il più dettagliato possibile!</strong><br/>
                      <span class="info">Ti ricordiamo che in mancanza di informazioni verrano prese in considerazioni le versioni base del veicolo</span>
                    </p>
                  </div>
                </div>

                <div class="row">
                  <div class="large-12 columns">
                    <div class="right-align-text">i campi contrassegnati da * sono obbligatori</div>
                  </div>
                </div>
                
                <!-- <form class="form-dati-anagrafici"> -->
                  <div class="row">
                    <div class="large-12 columns">
                      <h3 class="arrow-title">Dati dettagli del veicolo</h3>
                      <a class="button importa-dati" data-reveal-id="modale-importa" href="#" title="Importa dati da un veicolo già inserito"><span class="icon"></span>Importa dati da un veicolo già inserito</a>
                      
                      <div id="modale-importa" class="reveal-modal arval" data-reveal>
                        <form class="form-importa-dati" name="importa-dati" id="importa-dati">
                          <h4 class="arrow-title">Seleziona il veicolo da cui importare i dati</h4>
                          <div class="dotted-line"></div>

                          <table cellpadding="0" cellspacing="0"> 
                            <tbody> 
                              <tr> 
                                <td> 
                                  <a href="javascript:void(0)" class="left">
                                    <img src="images/sample-content/sample1.jpg" alt="veicolo 1" />
                                    <span>veicolo 1 - Chx806w</span>
                                  </a>
                                  <div class="right">
                                    <input type="checkbox" value="1" name="1"  /><label for="1">&nbsp;</label>
                                  </div>
                                </td>
                              </tr> 
                              <tr> 
                                <td> 
                                  <a href="javascript:void(0)" class="left">
                                    <span>veicolo 1 - Chx806w</span>
                                  </a>
                                  <div class="right">
                                  <input type="checkbox" value="2" name="2"  /><label for="2">&nbsp;</label>
                                  </div>
                                </td>
                              </tr> 
                              <tr> 
                                <td> 
                                  <a href="javascript:void(0)" class="left">
                                    <img src="images/sample-content/sample1.jpg" alt="veicolo 1" />
                                    <span>veicolo 1 - Chx806w</span>
                                  </a>
                                  <div class="right">
                                  <input type="checkbox" value="3" name="3"  /><label for="3">&nbsp;</label>
                                  </div>
                                </td>
                              </tr> 
                              <tr> 
                                <td> 
                                  <a href="javascript:void(0)" class="left">
                                    <img src="images/sample-content/sample1.jpg" alt="veicolo 1" />
                                    <span>veicolo 1 - Chx806w</span>
                                  </a>
                                  <div class="right">
                                  <input type="checkbox" value="4" name="4"  /><label for="4">&nbsp;</label>
                                  </div>
                                </td>
                              </tr> 
                              <tr> 
                                <td> 
                                  <a href="javascript:void(0)" class="left">
                                    <span>veicolo 1 - Chx806w</span>
                                  </a>
                                  <div class="right">
                                  <input type="checkbox" value="5" name="5"  /><label for="5">&nbsp;</label>
                                  </div>
                                </td>
                              </tr> 
                            </tbody> 
                          </table>
                          <a class="button radius importa disabled" href="#" title="Importa dati">Importa dati<span class="icon"></span></a>
                          <a class="close-reveal-modal">&#215;</a>
                        </form>
                      </div>
                    </div>
                  </div>

                  <div class="row">
                    <div class="large-12 columns"><div class="dotted-line"></div></div>
                  </div>
                  
                  <form id="dettagli-veicolo" name="dettagli-veicolo" class="form-dettagli-veicolo" action="">
                    
                  <div class="row">
                    <div class="large-4 columns">
                      <label class="imported">Targa dell'auto*
                        <input type="text" placeholder="Es: C5hc3s4" />
                      </label>
                    </div>
                    <div class="large-4 columns">
                      <label>Data di immatricolazione mm /aaaa*</label>
                        <div class="styled-select tiny">
                        <select name="mese">
                          <option value="1">Gennaio</option>
                          <option value="2">Febbraio</option>
                          <option value="3">Marzo</option>
                          <option value="4">Aprile</option>
                          <option value="5">Maggio</option>
                          <option value="6">Giugno</option>
                          <option value="7">Luglio</option>
                          <option value="8">Agosto</option>
                          <option value="9">Settembre</option>
                          <option value="10">Ottobre</option>
                          <option value="11">Novembre</option>
                          <option value="12">Dicembre</option>
                        </select>
                        </div>
                        <div class="styled-select tiny">
                        <select class="half" name="anno">
                          <option value="1960">1960</option>
                          <option value="1970">1970</option>
                          <option value="1980">1980</option>
                          <option value="1990">1990</option>
                          <option value="2000">2000</option>
                          <option value="2010">2010</option>
                        </select>
                        </div>
                      
                    </div>
                    <div class="large-4 columns">
                      <label>Veicolo di importazione*</label>
                        <input type="radio" name="importazione" value="1" id="importazioneSi"><label for="importazioneSi" class="chioce-label">Si</label>
                        <input type="radio" name="importazione" value="0" id="importazioneNo"><label for="importazioneNo" class="chioce-label">No</label>
                      </label>
                    </div>
                  </div>

                  <div class="row">
                    <div class="large-12 columns"><div class="dotted-line"></div></div>
                  </div>

                  <div class="row">
                    <div class="large-4 columns">
                      <label>Marca dell'auto*</label>
                        <div class="styled-select">
                        <select name="marca">
                          <option value="0">-- Seleziona una marca --</option>
                          <option value="1">A</option>
                          <option value="2">B</option>
                          <option value="3">C</option>
                        </select>
                        </div>
                    </div>
                    <div class="large-4 columns">
                      <label>Modello*
                        <input type="text" name="modello" placeholder="Es: Panda" />
                      </label>
                    </div>
                    <div class="large-4 columns">
                      <label>Versione* 
                      <span data-tooltip data-options="disable_for_touch:true" class="has-tip tip-top tooltip-icon" title="Tooltips are awesome, you should totally use them!">
                        <img src="images/tooltip.png" alt="" />
                      </span>
                        <input type="text" name="versione" placeholder="Es: 1.2 69cv E6 EASY" />
                      </label>
                      <input type="checkbox" value="1" name="versione-sconosciuta" id="versione-sconosciuta"  /><label for="versione-sconosciuta" class="chioce-label small">Non conosco la versione dell'auto</label>
                    </div>
                  </div>

                  <div class="row">
                    <div class="large-12 columns"><div class="dotted-line"></div></div>
                  </div>

                  <div class="row">
                    <div class="large-3 columns">
                      <label>Potenza* <span data-tooltip data-options="disable_for_touch:true" class="has-tip tip-top tooltip-icon" title="Tooltips are awesome, you should totally use them!">
                        <img src="images/tooltip.png" alt="" />
                      </span>
                      <input type="text" name="potenza" placeholder="" class="span-side" />
                      </label>
                      <span class="chioce-label small">kW</span>
                    </div>
                    <div class="large-3 columns">
                      <label class="imported">Alimentazione*
                        <div class="styled-select medium">
                        <select name="alimentazione">
                          <option value="diesel">Diesel</option>
                          <option value="benzina">Benzina</option>
                          <option value="gpl">Gpl</option>
                          <option value="metano">Metano</option>
                        </select>
                        </div>
                      </label>
                    </div>
                    <div class="large-3 columns">
                      <label>Colore*
                      <span data-tooltip data-options="disable_for_touch:true" class="has-tip tip-top tooltip-icon" title="Tooltips are awesome, you should totally use them!">
                        <img src="images/tooltip.png" alt="" height="25" width="17" />
                      </span>
                        <input type="text" name="colore" placeholder="Es: Rosso" />
                      </label>
                      <input type="checkbox" value="1" name="colore-metallizzato" id="colore-metallizzato"  /><label for="colore-metallizzato" class="chioce-label small">Metallizzato</label>
                    </div>
                    <div class="large-3 columns">
                      <label>Chilometraggio*
                        <input type="text" name="chilometraggio" placeholder="Es: 180.000 km" />
                      </label>
                    </div>
                  </div>

                  <div class="row">
                    <div class="large-12 columns"><div class="dotted-line"></div></div>
                  </div>

                  <div class="row">
                    <div class="large-6 columns">
                      <label>Input Label</label>
                      <div class="cols3-checkbox-list">
                        
                        <input type="checkbox" value="1" name="interni-in-pelle" id="interni-in-pelle"  />
                        <label for="interni-in-pelle" class="chioce-label small">Interni in pelle</label>

                        <input type="checkbox" value="1" name="navigatore" id="navigatore"  />
                        <label for="navigatore" class="chioce-label small">Navigatore</label>
                        
                        <input type="checkbox" value="1" name="fari-xenon" id="fari-xenon"  />
                        <label for="fari-xenon" class="chioce-label small">Fari xenon</label>
                        
                        <input type="checkbox" value="1" name="cambio-automatico" id="cambio-automatico"  />
                        <label for="cambio-automatico" class="chioce-label small">Cambio automatico</label>
                        
                        <input type="checkbox" value="1" name="tetto-apribile" id="tetto-apribile"  />
                        <label for="tetto-apribile" class="chioce-label small">Tetto apribile</label>
                        
                        <input type="checkbox" value="1" name="cerchi-in-lega" id="cerchi-in-lega"  />
                        <label for="cerchi-in-lega" class="chioce-label small">Cerchi in lega</label>
                        
                        <input type="checkbox" value="1" name="7-posti" id="7-posti"  />
                        <label for="7-posti" class="chioce-label small">7 posti</label>
                        
                        <input type="checkbox" value="1" name="cruise-control" id="cruise-control"  />
                        <label for="cruise-control" class="chioce-label small">Cruise control</label>
                        
                        <input type="checkbox" value="1" name="trazione-integrale" id="trazione-integrale"  />
                        <label for="trazione-integrale" class="chioce-label small">Trazione integrale</label>

                        <input type="checkbox" value="1" name="park-assist" id="park-assist"  />
                        <label for="park-assist" class="chioce-label small">Park assist</label>

                        <input type="checkbox" value="1" name="sensori-parcheggio" id="sensori-parcheggio"  />
                        <label for="sensori-parcheggio" class="chioce-label small">Sensori parcheggio</label>

                        <input type="checkbox" value="1" name="telecamere-posteriori" id="telecamere-posteriori"  />
                        <label for="telecamere-posteriori" class="chioce-label small">Telecamere posteriori</label>
                            
                      </div>
                    </div>
                    <div class="large-6 columns">
                      <label class="imported">Optional diversi da quelli indicati precedentemente
                        <textarea name="optional" class="optional" placeholder="Aggiungi altri tipi di optional"></textarea>
                      </label>
                    </div>
                  </div>

                  <div class="row">
                    <div class="large-12 columns"><div class="dotted-line"></div></div>
                  </div>

                  <div class="row">
                    <div class="large-6 columns">
                      <label>
                        Fotografia del libretto (fronte / retro)*
                        <span data-tooltip data-options="disable_for_touch:true" class="has-tip tip-top tooltip-icon" title="Tooltips are awesome, you should totally use them!">
                          <img src="images/tooltip.png" alt="" height="25" width="17" />
                        </span>
                      </label>
                    </div>
                  </div>

                   <div class="row">
                    <div class="large-6 columns numero-documenti">
                      <img src="images/01-documenti-multipli.png" width="39" height="45" alt="Documenti multipli" />
                      <input type="radio" name="tipo-documento" value="separato" id="tipo-documento-separato" class="multi"><label class="chioce-label multi" for="tipo-documento-separato">Documenti separati<br/><span class="info">(Un file per il fronte del libretto ed un o per il retro)</span></label>
                    </div>

                    <div class="large-6 columns numero-documenti">
                      <img src="images/01-documento-singolo.png" width="39" height="45" alt="Documento singolo" />
                      <input type="radio" name="tipo-documento" value="unico" id="tipo-documento-unico" class="multi"><label class="chioce-label multi" for="tipo-documento-unico">Documento unico<br/><span class="info">(Un file per il fronte del libretto ed un o per il retro)</span></label>
                    </div>
                  </div>

                  <div class="row">
                    <div class="large-6 columns upload-libretto">

                      <label>
                        <input type="file" /><!-- <input type="text" /> -->
                      </label>

                      <label>
                        <input type="file" /><!-- input type="text" /> -->
                      </label>
                    </div>
                  </div>

                  <div class="row">
                    <div class="large-12 columns"><div class="dotted-line"></div></div>
                  </div>

                  <div class="row">
                    <div class="large-4 columns">
                      <label>N° di proprietari precedenti
                        <span data-tooltip data-options="disable_for_touch:true" class="has-tip tip-top tooltip-icon" title="Tooltips are awesome, you should totally use them!">
                          <img src="images/tooltip.png" alt="" height="25" width="17" />
                        </span>
                      </label>
                      <div class="cols5-radio-list">
                        <input type="radio" name="proprietari" value="1" id="proprietari1"><label for="proprietari1">1</label>
                        <input type="radio" name="proprietari" value="2" id="proprietari2"><label for="proprietari2">2</label>
                        <input type="radio" name="proprietari" value="3" id="proprietari3"><label for="proprietari3">3</label>
                        <input type="radio" name="proprietari" value="4" id="proprietari4"><label for="proprietari4">4</label>
                        <input type="radio" name="proprietari" value="5+" id="proprietari5+"><label for="proprietari5+">5+</label>
                      </div>
                    </div>
                    <div class="large-4 columns">
                      <label>Auto portata fiscalmente in detrazione
                        <span data-tooltip data-options="disable_for_touch:true" class="has-tip tip-top tooltip-icon" title="Tooltips are awesome, you should totally use them!">
                          <img src="images/tooltip.png" alt="" height="25" width="17" />
                        </span>
                      </label>
                      <div class="cols3-radio-list">
                        <input type="radio" name="detrazione" value="1" id="detrazioneNd"><label for="detrazioneNd" class="chioce-label">Non disponibile</label>
                        <input type="radio" name="detrazione" value="2" id="detrazioneSi"><label for="detrazioneSi" class="chioce-label">Si</label>
                        <input type="radio" name="detrazione" value="3" id="detrazioneNo"><label for="detrazioneNo" class="chioce-label">No</label>
                      </div>
                    </div>
                    <div class="large-4 columns">
                      <label>Vendita soggetta a IVA
                        <span data-tooltip data-options="disable_for_touch:true" class="has-tip tip-top tooltip-icon" title="Tooltips are awesome, you should totally use them!">
                          <img src="images/tooltip.png" alt="" height="25" width="17" />
                        </span>
                      </label>
                      <div class="cols2-radio-list">
                        <input type="radio" name="iva" value="2" id="ivaSi"><label for="ivaSi" class="chioce-label">Si</label>
                        <input type="radio" name="iva" value="3" id="ivaNo"><label for="ivaNo" class="chioce-label">No</label>
                      </div>
                    </div>
                  </div>

                  <div class="row">
                    <div class="large-12 columns">
                    <div class="dotted-line"></div></div>
                  </div>

                  <div class="row">
                    <div class="large-6 columns">
                       <label>Tipo di pneumatici montati al momento della consegna*</label>
                      <div class="cols2-radio-list">
                        <input type="radio" name="tipo-pneumatici" value="2" id="tipo-pneumaticiE"><label for="tipo-pneumaticiE" class="chioce-label">Estivi</label>
                        <input type="radio" name="tipo-pneumatici" value="3" id="tipo-pneumaticiI"><label for="tipo-pneumaticiI" class="chioce-label">Invernali</label>
                      </div>
                    </div>
                    <div class="large-6 columns">
                       <label>Stato degli pneumatici*</label>
                      <div class="cols2-radio-list">
                        <input type="radio" name="stato-pneumatici" value="2" id="stato-pneumaticiE"><label for="stato-pneumaticiE" class="chioce-label">Buoni</label>
                        <input type="radio" name="stato-pneumatici" value="3" id="stato-pneumaticiI"><label for="stato-pneumaticiI" class="chioce-label">Da cambiare</label>
                      </div>
                    </div>
                  </div>

                  <div class="row arrow-down separator"></div>
                    
                  <div class="row">
                    <div class="large-12 columns inserisci-dati">
                      <a class="button radius torna" href="#" title="Torna ai dati anagrafici"><span class="icon"></span>torna ai dati anagrafici</a>
                      <a class="button radius inserisci" href="#" title="Inserici i dati del veicolo">inserici i dati del veicolo<span class="icon"></span></a>
                  </div>

                  
                </form>

                
              </div>

          </div>
        </dd> 

       <dd class="accordion-navigation welcome">
          
          <div class="row arrow-down"></div>
          <div class="row step-completed">
            <a href="#foto-veicolo" class="welcome-title trigger">2 Fotografie del veicolo</a> 
          </div>
          
          <div class="content" id="foto-veicolo">
            
            <div class="row">
              <div class="large-12 columns">
                <p class="welcome-text gray-border">
                  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ornare porttitor urna, non interdum tortorMauri
                </p>
              </div>
            </div>

            <div class="row">
              <div class="large-12 columns">
                <div class="right-align-text">i campi contrassegnati da * sono obbligatori</div>
              </div>
            </div>


            <div class="row">
              <div class="large-12 columns">
                <h3 class="arrow-title">Fotografie del veicolo</h3>
              </div>
            </div>


            <form id="foto-veicolo" name="foto-veicolo" class="form-foto-veicolo" action="">
              <div class="row">
                <div class="large-12 columns foto-label">
                  <label>Carica le immagini dell veicolo*
                    <span data-tooltip data-options="disable_for_touch:true" class="has-tip tip-top tooltip-icon" title="Tooltips are awesome, you should totally use them!">
                      <img src="images/tooltip.png" alt="" height="25" width="17" />
                    </span>
                  </label>
                  <span class="foto-label-desc">
                    Le foto da caricare devono essere in formato jpg,png,tiff e non superare XX dimensione ecc..
                  </span>
                </div>
              </div>
              
              <div class="row">
                <div class="large-12 columns">
                  <div class="foto-veicolo-box loaded">
                    <div class="foto">
                      <img width="153" height="142" alt="Fronte" src="images/sample-content/sample3.jpg">
                    </div>
                    <label>
                      <input type="file" />
                      <div class="elimina-foto"><span>X</span>elimina foto</div>
                    </label>
                  </div>
                  <div class="foto-veicolo-box loaded">
                    <div class="foto">
                       <img width="153" height="142" alt="Fronte" src="images/sample-content/sample1.jpg">
                    </div>                      
                    <label>
                      <input type="file" />
                      <div class="elimina-foto"><span>X</span>elimina foto</div>
                    </label>
                  </div>
                  <div class="foto-veicolo-box">
                    <div class="foto">
                       <img width="153" height="142" alt="Fianco sinistro" src="images/04-veicolo-fianco-dx.gif">
                    </div>
                    <label>
                      <input type="file" />
                      <div class="elimina-foto"><span>X</span>elimina foto</div>
                    </label>
                  </div>
                  <div class="foto-veicolo-box">
                    <div class="foto">
                       <img width="153" height="142" alt="Fianco sinistro" src="images/04-veicolo-fianco-sx.gif">
                    </div>
                    <label>
                      <input type="file" />
                      <div class="elimina-foto"><span>X</span>elimina foto</div>
                    </label>
                  </div>
                  <div class="foto-veicolo-box">
                    <div class="foto">
                       <img width="153" height="142" alt="Interni" src="images/04-veicolo-interno.gif">
                    </div>
                    <label>
                      <input type="file" />
                      <div class="elimina-foto"><span>X</span>elimina foto</div>
                    </label>
                  </div>
                </div>
              </div>

              <div class="row">
                <div class="large-12 columns form-separator">
                  <div class="gray-border"></div>
                </div>
              </div>

              <div class="row">
                <div class="large-12 columns">
                  <h3 class="arrow-title">Danni attualmente presenti</h3>
                </div>
              </div>

              <div class="row">
                <div class="large-6 columns danni-attuali">
                   <label>Il veicolo presenta attualmente dei danni?<span data-tooltip data-options="disable_for_touch:true" class="has-tip tip-top tooltip-icon" title="Tooltips are awesome, you should totally use them!">
                      <img src="images/tooltip.png" alt="" height="25" width="17" />
                    </span></label>
                  <div class="cols2-radio-list">
                    <input type="radio" name="danni-attuali" value="Si" id="danni-attuali-s"><label for="danni-attuali-s" class="chioce-label">Sì</label>
                    <input type="radio" name="danni-attuali" value="No" id="danni-attuali-n"><label for="danni-attuali-n" class="chioce-label">No</label>
                  </div>
                </div>
              </div>

              <div class="danni-clone">
                  <div class="row">
                    <div class="large-12 columns">
                    <div class="dotted-line"></div></div>
                  </div>
                  <div class="row">
                      <div class="large-6 columns">
                          <label>Parte dell'auto coinvolta*</label>
                          <div class="styled-select x-large">
                          <select name="provincia-ritiro">
                            <option value="0">- Seleziona parte dell'auto coinvolta - </option>
                            <option value="1">1</option>
                            <option value="2">2</option>
                          </select>
                          </div>
                          <label class="spaced">Carica fotografia*
                          <input type="file" /><!-- <input type="text" /> -->
                        </label>
                      </div>
                      <div class="large-6 columns">
                        <label>Descrizione del danno*
                          <textarea name="descrizione-danno" class="descrizione-danno" placeholder=""></textarea>
                        </label>
                      </div>
                    </div>
                </div>
                <div class="row">
                  <div class="large-12 columns">
                  <div class="dotted-line"></div></div>
                </div>

              

              <div class="row">
                <div class="large-12 columns">
                  <a class="button aggiungi-danno" href="#" title="Aggiungi un altro danno"><span class="icon">+</span> Aggiungi un altro danno</a>
                </div>
              </div>
              
              <div class="row">
                <div class="large-12 columns form-separator">
                    <div class="gray-border"></div>
                  </div>
              </div>

              <div class="row">
                <div class="large-12 columns">
                  <h3 class="arrow-title">Danni gravi avuti in passato</h3>
                </div>
              </div>

              <div class="row">
                <div class="large-6 columns danni-passati">
                   <label>In passato il veicolo ha subito danni gravi?<span data-tooltip data-options="disable_for_touch:true" class="has-tip tip-top tooltip-icon" title="Tooltips are awesome, you should totally use them!">
                      <img src="images/tooltip.png" alt="" height="25" width="17" />
                    </span></label>
                  <div class="cols2-radio-list">
                    <input type="radio" name="danni-passati" value="Si" id="danni-passati-s"><label for="danni-passati-s" class="chioce-label">Sì</label>
                    <input type="radio" name="danni-passati" value="No" id="danni-passati-n"><label for="danni-passati-n" class="chioce-label">No</label>
                  </div>
                </div>
              </div>

            </form>

            <div class="row arrow-down"></div>


            <div class="row">
              <div class="large-12 columns inserisci-dati-ritiro">
                <a class="button radius torna" href="#" title="Torna ai dati veicolo"><span class="icon"></span>torna ai dati veicolo</a>
                <a class="button radius inserisci" href="#" title="Inserisci i dati per il ritiro">inserisci i dati per il ritiro<span class="icon"></span></a>
              </div>
            </div>

          </div>

          
        </dd> 
        
        <dd class="accordion-navigation welcome">

          <div class="row arrow-down"></div>
          <div class="row">
            <a href="#dati-ritiro" class="welcome-title trigger">3 Dati per il ritiro</a> 
          </div>
          
          <div class="content" id="dati-ritiro">
                
                <div class="row">
                  <div class="large-12 columns">
                    <p class="welcome-text gray-border">
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ornare porttitor urna, non interdum tortorMauri
                      </p>
                  </div>
                </div>

                <div class="row">
                  <div class="large-12 columns">
                    <div class="right-align-text">i campi contrassegnati da * sono obbligatori</div>
                  </div>
                </div>

                <div class="row">
                    <div class="large-12 columns">
                      <h3 class="arrow-title">Dati per il ritiro del veicolo</h3>
                    </div>
                </div>

                <div class="row">
                  <div class="large-12 columns">
                  <div class="dotted-line"></div></div>
                </div>

                <form id="dettagli-ritiro" name="dettagli-ritiro" class="form-dettagli-ritiro" action="">
                    
                  <div class="row">
                    <div class="large-4 columns">
                      <label>Consega auto direttamente al ritiro*
                        <span data-tooltip data-options="disable_for_touch:true" class="has-tip tip-top tooltip-icon" title="Tooltips are awesome, you should totally use them!">
                          <img src="images/tooltip.png" alt="" height="25" width="17" />
                        </span>
                      </label>
                      <div class="cols2-radio-list">
                        <input type="radio" name="consegna-ritiro" value="1" id="consegna-ritiroSi"><label for="consegna-ritiroSi" class="chioce-label">Si</label>
                        <input type="radio" name="consegna-ritiro" value="0" id="consegna-ritiroNo"><label for="consegna-ritiroNo" class="chioce-label">No</label>
                      </div>
                    </div>
                    <div class="large-8 columns disabled-cell">
                      <label>Data di immatricolazione mm /aaaa*</label>
                        <div class="styled-select tiny">
                        <select name="giorno">
                          <option value="01">01</option>
                          <option value="02">02</option>
                          <option value="03">03</option>
                          <option value="04">04</option>
                          <option value="05">05</option>
                          <option value="06">06</option>
                          <option value="07">07</option>
                          <option value="08">08</option>
                          <option value="09">09</option>
                          <option value="10">10</option>
                          <option value="11">11</option>
                          <option value="12">12</option>
                          <option value="13">13</option>
                          <option value="14">14</option>
                          <option value="15">15</option>
                          <option value="16">16</option>
                          <option value="17">17</option>
                          <option value="18">18</option>
                          <option value="19">19</option>
                          <option value="20">20</option>
                          <option value="21">21</option>
                          <option value="22">22</option>
                          <option value="23">23</option>
                          <option value="24">24</option>
                          <option value="25">25</option>
                          <option value="26">26</option>
                          <option value="27">27</option>
                          <option value="28">28</option>
                        </select>
                        </div>
                        <div class="styled-select tiny">
                        <select name="mese">
                          <option value="1">Gennaio</option>
                          <option value="2">Febbraio</option>
                          <option value="3">Marzo</option>
                          <option value="4">Aprile</option>
                          <option value="5">Maggio</option>
                          <option value="6">Giugno</option>
                          <option value="7">Luglio</option>
                          <option value="8">Agosto</option>
                          <option value="9">Settembre</option>
                          <option value="10">Ottobre</option>
                          <option value="11">Novembre</option>
                          <option value="12">Dicembre</option>
                        </select>
                        </div>
                        <div class="styled-select tiny">
                        <select class="half" name="anno">
                          <option value="1960">1960</option>
                          <option value="1970">1970</option>
                          <option value="1980">1980</option>
                          <option value="1990">1990</option>
                          <option value="2000">2000</option>
                          <option value="2010">2010</option>
                        </select>
                        </div>
                      
                      </div>
                    </div>
                    <div class="row">
                      <div class="large-12 columns">
                      <div class="dotted-line"></div></div>
                    </div>
                    <div class="row">
                      <div class="large-6 columns">
                        <label>Città per il ritiro*
                          <input type="text" name="citta-ritiro" class="citta-ritiro" placeholder="" />
                        </label>
                      </div>
                      <div class="large-6 columns">
                        <label>Provinica* <span class="info">Attenzione, per alcune provincie è previsto un costo.</span><span data-tooltip data-options="disable_for_touch:true" class="has-tip tip-top tooltip-icon" title="Tooltips are awesome, you should totally use them!">
                          <img src="images/tooltip.png" alt="" height="25" width="17" />
                        </span></label>
                          <div class="styled-select x-large">
                          <select name="provincia-ritiro">
                            <option value="0">-- Seleziona provincia --</option>
                            <option value="Milano">Milano</option>
                            <option value="Torino">Torino</option>
                          </select>
                          </div>
                      </div>
                    </div>

                    <div class="row separator"></div>

                    <div class="row">
                      <div class="large-12 columns">
                        <input type="checkbox" value="1" name="privilegi" id="privilegi"  /><label for="privilegi">Privilegi sul veicolo*</label>
                      </div>
                    </div>

                    <div class="row arrow-down separator"></div>
                    
                <div class="row">
                  <div class="large-12 columns inserisci-dati">
                    <a class="button radius torna" href="#" title="Fotografie auto"><span class="icon"></span>fotografie auto</a>
                    <button type="submit" class="button radius inserisci">fine dell' inserimento dati<span class="icon"></span></button>
                  </div>
                </div>
                    
                  </div>
                </form>

                

                

          </div>


        </dd> 
      </dl>

      
    

      

    </div>


    <div class="copy">&copy; Arval 2014</div>
    <footer><a href="#" title="ARVAL Bnp Paribas Group"></a></footer>

    <script src="bower_components/jquery/dist/jquery.min.js"></script>
    <script src="bower_components/foundation/js/foundation.min.js"></script>
    <script src="js/app.js"></script>
  </body>
</html>
